import React, { useState, useEffect } from 'react'
import { Routes, Route, Link } from 'react-router-dom'
import { Layout, Menu, Card, Button, Input, List, Avatar, Space, Tag, Typography } from 'antd'
import { 
  HomeOutlined, 
  UserOutlined, 
  SettingOutlined, 
  MessageOutlined,
  LikeOutlined,
  StarOutlined
} from '@ant-design/icons'
import Home from './pages/Home.jsx'
import User from './pages/User.jsx'
import Settings from './pages/Settings.jsx'
import './App.css'

const { Header, Sider, Content } = Layout
const { Title, Paragraph } = Typography

/**
 * React子应用主组件
 * @description 提供React子应用的主要界面和路由
 */
function App(props) {
  // 状态管理
  const [collapsed, setCollapsed] = useState(false)
  const [selectedKey, setSelectedKey] = useState('home')
  
  // 从主应用传递的数据
  const { mainAppData } = props || {}

  // 菜单项配置
  const menuItems = [
    {
      key: 'home',
      icon: <HomeOutlined />,
      label: <Link to="/">首页</Link>
    },
    {
      key: 'user',
      icon: <UserOutlined />,
      label: <Link to="/user">用户管理</Link>
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: <Link to="/settings">设置</Link>
    }
  ]

  // 处理菜单点击
  const handleMenuClick = ({ key }) => {
    setSelectedKey(key)
  }

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 侧边栏 */}
      <Sider 
        collapsible 
        collapsed={collapsed} 
        onCollapse={setCollapsed}
        theme="light"
        style={{ borderRight: '1px solid #f0f0f0' }}
      >
        <div className="logo">
          <h3>React子应用</h3>
        </div>
        <Menu
          mode="inline"
          selectedKeys={[selectedKey]}
          items={menuItems}
          onClick={handleMenuClick}
        />
      </Sider>

      {/* 主内容区域 */}
      <Layout>
        <Header style={{ background: '#fff', padding: '0 20px', borderBottom: '1px solid #f0f0f0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Title level={4} style={{ margin: 0 }}>
              React子应用 - 基于React 18 + Ant Design
            </Title>
            {mainAppData && (
              <Tag color="blue">来自主应用: {mainAppData}</Tag>
            )}
          </div>
        </Header>
        
        <Content style={{ margin: '20px', background: '#fff', padding: '20px', borderRadius: '8px' }}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/user" element={<User />} />
            <Route path="/settings" element={<Settings />} />
          </Routes>
        </Content>
      </Layout>
    </Layout>
  )
}

export default App 